<template>
    <a-modal
        v-model:visible="showModal"
        :title="title"
        :width="420"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        @ok="onSubmit"
        @cancel="handleCancle"
    >
        <a-form class="dept-model" layout="horizontal" :model="formState" :rules="rules" ref="formRef">
            <a-form-item class="full-width" :label="t('yl.eslDeviceType')" name="password" v-if="userType !== 'D'">
                <a-radio-group v-model:value="value">
                    <a-radio :value="1">价签</a-radio>
                    <a-radio :value="2">LED价牌</a-radio>
                    <a-radio :value="3">基站</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.eslSelectTime')" name="password" v-if="userType !== 'D'">
                <a-range-picker v-model:value="value3" />
            </a-form-item>

            <!-- 密码 -->
            <a-form-item class="full-width" :label="t('yl.password')" name="password">
                <a-input v-model:value="formState.password" :placeholder="t('yl.password')" />
            </a-form-item>

            <a-form-item class="full-width">
                <span style="margin-left: 80px; color: #f00">{{ notes }}</span>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';
import { encrypt } from '@/utils';
import { addMerchant, editMerchant, getMerchantFreeze, getMerchantResetPaw } from '@/api/merchant';

interface DeptState {
    password: string | null;
    id: string;
}

// 表单校验规则
const initRules = (t: fn) => {
    return {
        password: [{ required: true, message: t('yl.password'), trigger: 'blur' }],
    };
};

export default defineComponent({
    name: 'roleModel',
    components: {},
    props: {
        password: {
            type: String,
            default: () => '',
        },
        pawId: {
            type: String,
            default: () => '',
        },
        type: {
            type: String,
            default: () => '',
        },
        notesTitle: {
            type: String,
            default: () => 0,
        },
        visible: {
            type: Boolean,
            default: () => false,
        },

        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        userType: { type: String, default: () => '' },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();
        console.log(props);
        const showModal = computed(() => props.visible);
        const notes = computed(() => props.notesTitle);
        const userType = computed(() => props.userType);
        const formState: DeptState = reactive({
            password: '', // 设备编号
            id: '',
        });

        onMounted(() => {});
        // 表单校验
        const rules = initRules(t);
        const formRef = ref();
        // 提交
        const onSubmit = async () => {
            formRef.value.validate().then(() => {
                let data = {
                    paw: encrypt(formState.password),
                    id: props.pawId,
                };
                console.log(props.type);
                // Freeze 冻结解冻 ResetPaw重置密码
                const getfun = props.type == 'ResetPaw' ? getMerchantResetPaw(data) : getMerchantFreeze(data);
                getfun
                    .then(() => {
                        console.log('333');
                        const timer = setTimeout(() => {
                            formRef.value.resetFields();
                            emit('submit');
                            clearTimeout(timer);
                        }, 1000);
                    })
                    .catch(() => {});
            });
        };

        // 取消
        const handleCancle = () => {
            formRef.value.resetFields();
            return emit('cancle');
        };

        return {
            formRef,
            showModal,
            formState,
            notes,
            t,
            rules,
            onSubmit,
            handleCancle,
            userType,
        };
    },
});
</script>
<style lang="scss" scoped>
.dept-model {
    @include flexWrap;
    width: 100%;
    .ant-form-item {
        @include flex;
        width: 50%;
        margin-right: 0;
        padding-right: $width10;
        margin-bottom: $width8;
        :deep .ant-form-item-label {
            flex-basis: $formLabel;
        }
        :deep .ant-form-item-control-wrapper {
            flex: 1;
        }
        :deep .ant-form-item-children,
        :deep .ant-input-number {
            width: 100%;
        }
        &.full-width {
            width: 100%;
        }
    }
}
</style>
